<template>
  <div class="my">
    <header>
      <van-image class="headerImg" width="100" height="100" lazy-load src="https://z3.ax1x.com/2021/08/03/fPFQn1.jpg" round />
      <a href="/login" v-if="!$store.state.user.login">立即登录</a>
      
      <a href="#" v-if="$store.state.user.login">欢迎你,{{$store.state.user.username}}</a>
      <span v-if="$store.state.user.login" class="out" @click="Cout">退出</span>
      <!-- <a href="/login" v-if="!$store.state.login"></a> -->
    </header>
    <!-- <van-tabbar v-model="active" :fixed="false" active-color="#cece4e" inactive-color="#cece4e" class="fontSize">
      <van-tabbar-item icon="coupon-o" >电影订单</van-tabbar-item>
      <van-tabbar-item icon="column" >商品订单</van-tabbar-item>
    </van-tabbar> -->
    <div class="order">
      <a href="">
        <van-icon name="coupon" size="30" color="#cece4e"/>
        <span>电影订单</span>
      </a>
      <a href="">
        <van-icon name="column" size="30" color="#cece4e"/>
        <span>商品订单</span>
      </a>
    </div>
    <div class="">
      <van-cell title="卖座票" icon="credit-pay" is-link to="#" />
      <van-cell title="组合红包" icon="bill-o" is-link to="#" />
      <van-cell title="余额" icon="after-sale" is-link to="#" />
      <van-cell title="设置" icon="setting-o" is-link to="#" />
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      active:0,
    };
  },
  computed: {},
  methods: {
    Cout(){
      window.sessionStorage.setItem("loginData","");
      this.$router.go(0)
    }
  },
  components: {},
  filters: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
.my{
  height: 100%;
  background: #fdf3f5;
}
header {
  display: flex;
  padding: 0 20px;
  align-items: center;
  height: 200px;
  background: url("https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png");
  background-size: 100%;
}
.headerImg{
  width: 90px !important;
  height: 90px !important;
}
header a{
  margin-left: 20px;
  color: white;
}
.order{
  display: flex;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 10px;
  background-color: white;
}
.order>a{
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #b35162;
  font-size: 14px;
}
.van-cell i:first-of-type{
  color: #8e8e2f;
  font-size: 22px;
  margin-right: 15px;
}
.out{
  cursor: pointer;
}
</style>